<template>
  <div class="w-[256px] h-full bg-white">
    <div :class="TITLE_CLASS">
      <div class="flex items-center">
        <div class="w-[2px] h-[14px] bg-[--el-color-primary]" />
        <div class="text-[#242930] text-sm ml-[10px]">
          {{ t("expiry_manage.form.category_list") }}
        </div>
      </div>
    </div>
    <div class="px-[20px]">
      <!--      <el-input-->
      <!--        v-model="category"-->
      <!--        :prefix-icon="useRenderIcon('iconamoon:search-light')"-->
      <!--        @change="inputHandle"-->
      <!--      />-->
      <el-scrollbar class="mt-4 scroll-height" always>
        <div
          v-if="showAll"
          :class="['striped cate', categoryChoose?.id === 0 ? 'active' : '']"
          @click="
            cateClick({
              name: '全部',
              id: 0
            })
          "
        >
          {{ t("expiry_manage.form.all") }}
        </div>
        <div
          v-for="(item, index) in categoryList"
          :key="item.id"
          :class="[
            'striped cate',
            categoryChoose?.id === item.id ? 'active' : ''
          ]"
          @click="cateClick(item)"
        >
          {{ index + 1 }}、{{ item.name }}
        </div>
      </el-scrollbar>
    </div>
  </div>
</template>

<script setup lang="ts">
import { TITLE_CLASS } from "@/views/expiry/material/materialManage/constants";
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
import { onMounted, ref } from "vue";
import { CategoryProp, getCategory } from "@/api/expiry/expiry";
import { cloneDeep } from "lodash-unified";
import { useI18n } from "vue-i18n";

const props = defineProps<{
  showAll?: boolean;
}>();

const { t } = useI18n();

const emit = defineEmits(["cateClick"]);

const category = ref("");
const allCate = {
  name: t("expiry_manage.form.all"),
  id: 0
};
const categoryChoose = ref<Partial<CategoryProp>>({
  name: ""
});
const categoryList = ref([]);
let categoryCopyList = [];

const init = () => {
  getCategory().then(res => {
    categoryList.value = res.data;

    // props.showAll &&
    //   categoryList.value.unshift({
    //     name: "全部",
    //     id: 0
    //   });
    categoryCopyList = cloneDeep(categoryList.value);
    if (res.data.length) {
      cateClick(props.showAll ? allCate : res.data[0]);
    }
  });
};

const cateClick = (item = null) => {
  categoryChoose.value = item;
  if (!item) {
    categoryChoose.value = props.showAll ? allCate : categoryList.value[0];
  }
  emit("cateClick", categoryChoose.value);
};

const inputHandle = (val: string) => {
  if (val) {
    categoryList.value = categoryCopyList.filter(item =>
      item.name.includes(val)
    );
  } else {
    categoryList.value = cloneDeep(categoryCopyList);
  }
};

onMounted(init);

defineExpose({
  cateClick
});
</script>

<style scoped>
.striped {
  &:nth-child(2n + 1) {
    background: var(--autata-striped-bg-color);
  }
}

.cate {
  height: 46px;
  padding-left: 20px;
  font-size: 14px;
  font-weight: 400;
  line-height: 46px;
  color: var(--autata-font-color);
  transition: all 0.3s;

  &.active {
    color: var(--el-color-primary);
    background: var(--autata-hover-bg-color);
  }

  &:hover {
    color: var(--el-color-primary);
    cursor: pointer;
    background: var(--autata-hover-bg-color);
  }
}
</style>
